<template>
  <el-dialog
    :title="dialogTitle"
    :visible="dialogFormVisible"
    @close="closeDialog"
  >
    <el-form :model="stuForm" :rules="stuRules" ref="addStuRuleForm">
      <el-form-item label="头像" style="text-align: left">
        <el-upload
          class="uploadAvatar"
          ref="uploadAvatar"
          action="https://chst.vip/students/uploadStuAvatar"
          list-type="picture-card"
          :on-success="uploadSuccess"
          :on-remove="removeAvatar"
          :limit="limit"
          name="headimgurl"
          :multiple="false"
          :file-list="headImgList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="stuForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="项目地址" prop="productUrl">
        <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="班级" prop="class">
        <el-input v-model="stuForm.class" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="stuForm.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="stuForm.city" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学历" prop="degree">
        <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="stuForm.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="HIDE_DIALOG">取 消</el-button>
      <el-button type="primary" @click="confirmClick('addStuRuleForm')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import * as api from "@/api/studentManager";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["dialogFormVisible", "dialogTitle", "currentRow"]),
  },
  created() {
    //用一个新的对象oldStuForm来存储stuForm的初始值
    this.oldStuForm = { ...this.stuForm };
  },
  data() {
    return {
      stuForm: {
        name: "",
        productUrl: "",
        headimgurl: "",
        class: "",
        age: "",
        city: "",
        degree: "",
        description: "",
      },
      oldStuForm: {}, //存储stuForm的初始值，便于之后清空stuForm
      headImgList: [], //回显的头像
      limit: 1, //上传文件的数量
      stuRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        class: [{ required: true, message: "请输入班级", trigger: "blur" }],
        degree: [{ required: true, message: "请输入学历", trigger: "blur" }],
        city: [{ required: true, message: "请输入城市", trigger: "blur" }],
        productUrl: [
          { required: true, message: "请输入项目地址", trigger: "blur" },
        ],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    ...mapMutations(["SHOW_DIALOG", "HIDE_DIALOG", "CHANGE_DIALOG_TITLE"]),
    ...mapActions(["GET_STU_LIST"]),
    uploadSuccess(r) {
      console.log(r);
      if (r.state) {
        //把返回来的网络图片地址，添加给stuForm,传给服务器，保存到数据库
        this.stuForm.headimgurl = r.headimgurl;
        if (this.dialogTitle === "编辑学员信息") {
          //把headImgList列表内容设为当前项
          this.headImgList = [{ url: r.headimgurl }];
        }
      } else {
        this.$message.error("上传失败");
      }
    },
    removeAvatar(r) {},

    //dialog 点击确定按钮触发的事件
    confirmClick(formName) {
      this.$refs[formName].validate((valid) => {
        //关闭dialog
        this.HIDE_DIALOG();
        //console.log(valid);
        if (valid) {
          //表单校验成功
          //发送请求，通过dialogTitle判断此时请求添加接口还是编辑接口
          if (this.dialogTitle === "增加学员信息") {
            //console.log(this.stuForm); //this.stuForm就是收集到的用户输入数据
            //发送添加请求
            api.addStuInfo(this.stuForm).then((res) => {
              //console.log(res);
              if (res.data.state) {
                //增加成功
                //重新发起请求，更新表格内容
                this.GET_STU_LIST();
                //提示
                this.$message.success("增加成功")
              } else {
                //增加失败
                this.$message.error("增加失败");
              }
            });
          } else {
            //发送编辑请求
            api.updateStuInfo(this.stuForm).then((res) => {
              console.log(res);
              if (res.data.state) {
                //修改成功，更新视图
                this.GET_STU_LIST();
                //提示
                this.$message.success("修改成功")
              } else {
                //修改失败，比如你在更新的时候，这条数据被别人删除了
                this.$message.error("更新失败，没有做任何修改或者数据不存在");
                //刷新页面
                this.GET_STU_LIST()
              }
            }); 
          }
        } else {
          this.$message.error("请将内容填写完整");
        }
      });
    },
    //点击dialog右上角”x“的方法
    closeDialog() {
      //隐藏dialog
      this.HIDE_DIALOG();
      //清空stuForm表单数据，变为初始值
      this.stuForm = this.oldStuForm;
      //清空回显头像的数组
      this.headImgList = [];
      //dialog关闭之后默认为下一次点击的是增加学员信息，所以将limit变为1
      this.limit = 1;
    },
  },
  watch: {
    currentRow(newVal) {
      //console.log(newVal);
      //数据回显，从vuex中获取回显的数据
      //console.log(this.currentRow);
      //console.log(this.stuForm);
      //回显变化的row
      this.stuForm = this.currentRow;
      //头像回显
      this.headImgList = [{ url: this.currentRow.headimgurl }];
      //编辑的时候将limit变为2
      this.limit = 2;
    },
  },
};
</script>